// 状态管理的文件
import { createStore } from 'vuex'
// 导入数据持久化操作的创建函数
import createPersistedState from 'vuex-persistedstate'

// 导入状态模块
import student from './modules/student'

// 创建一个新的 store 实例
const store = createStore({
  // 严格模式，在开发环境下打开严格模式，不要在生产环境中打开
  strict: process.env.NODE_ENV !== 'production',
  state () {
    // ************ 声明全局状态的地方 ***********
    return {
      count: 100,
      // 放用户信息用的地方
      userInfo: {},
      // 记录当前路由路径
      currentPath: '/'
    }
  },
  mutations: {
    // ************ 状态管理中唯一修改数据的方法 ***********
    add (state) {
      // setTimeout(() => {
      state.count++
      // }, 1000)
    },
    addNum (state, value) {
      // state 就是我们的所有状态，value 就是我们传递过来的数据
      state.count += value
    },
    // 保存用户数据
    updateUserInfo (state, value) {
      state.userInfo = value
    },
    // 修改路由路径的方法
    updateCurrentPath (state, value) {
      state.currentPath = value
    }
  },
  actions: {
    // ************ 异步处理的地方 ***********
    // 也要调用 mutations 进行修改
    addActions (context) {
      // console.log('222222', context);
      // 所谓的异步方法，就是可以在这里先处理好异步，处理好之后在调用同步修改
      setTimeout(() => {
        context.commit('add')
      }, 1000);
    },
    addNumActions (context, data) {
      setTimeout(() => {
        context.commit('addNum', data.num)
      }, 1000);
    }
  },
  getters: {
    // ************ 相当于 vue 中的计算属性 ***********
    vipCount (state) {
      return state.count * 0.8
    }
  },
  modules: {
    // ************ 状态模块 ***********
    student
  },
  // 配置 vuex 插件用的
  plugins: [
    // 创建持久化对象
    createPersistedState({
      // 配置需要持久化的数据
      reducer: state => {
        return {
          // 需要持久化的数据
          userInfo: state.userInfo
        }
      }
    })
  ]
})

export default store
